<template>
  <el-dialog
    title="流播放"
    :visible.sync="visible"
    class="dialog"
    width="800px"
    @close="close"
  >
    <div class="mainContainer">
      <video
        ref="videoElement"
        id="videoElement"
        class="centeredVideo"
        controls
        autoplay
        width="100%"
        height="400px"
      >
        Your browser is too old which doesn't support HTML5 video.
      </video>
    </div>
    <br />
    <div class="controls">
      <el-button type="primary" size="small" @click="flv_start">开始</el-button>
      <el-button type="primary" size="small" @click="flv_pause">暂停</el-button>
      <!-- <button @click="flv_destroy">停止</button> -->
    </div>
  </el-dialog>
</template>

<script>
import flvjs from "flv.js";
import { getVideoUrl, stopVideoUrl } from "@/api/video";

export default {
  data() {
    return {
      flvPlayer: null,
      visible: false,
    };
  },
  mounted() {},
  methods: {
    open() {
      this.visible = true;
      getVideoUrl().then(({ data }) => {
        this.$nextTick(() => {
          var videoElement = document.getElementById("videoElement");
          if (flvjs.isSupported()) {
            this.flvPlayer = flvjs.createPlayer({
              type: "flv",
              url: data.url,
            });
            this.flvPlayer.attachMediaElement(videoElement);
            this.flvPlayer.load(); //加载
          }
        });
      });
    },
    close() {
      this.flv_destroy();
      stopVideoUrl().then(() => {});
    },
    flv_start() {
      this.flvPlayer.play();
    },
    flv_pause() {
      this.flvPlayer.pause();
    },
    flv_destroy() {
      this.flvPlayer.pause();
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
      this.flvPlayer.destroy();
      this.flvPlayer = null;
    },
    flv_seekto() {
      this.flvPlayer.currentTime = parseFloat(
        document.getElementsByName("seekpoint")[0].value
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  &::v-deep .el-dialog__header {
    background-color: $base-theme-sub-color;
    padding: 15px 20px;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn {
      i:before {
        color: #fff;
      }
    }
  }
  .bottom-content {
    .button-list {
      text-align: right;
      margin-top: 20px;
    }
  }
}
.videobox {
  display: flex;
  /* justify-content: space-between; */
  /* flex-wrap: wrap; */
}
.videolist {
  width: 550px;
  height: 906px;
  display: flex;
  .search {
    margin-left: 50px;
    .el-input {
      width: 300px;
      margin-top: 20px;
    }
    ul {
      width: 100%;
      height: 777px;
      overflow: hidden;
      overflow-y: auto;
      list-style: none;
      li {
        padding: 7px;
        margin: 1px 0;
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
        cursor: pointer;
        &:hover {
          background: #fff;
        }
        .el-icon-video-camera-solid {
          font-size: 16px;
          color: #67c23a;
        }
      }
    }
  }
}
.video {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-evenly;
  video {
    object-fit: contain;
    width: 600px;
    height: 390px;
  }
}
</style>
